<!DOCTYPE html>
<style>

body { margin: 0 }
.margin { margin: 100px }
.grow { animation: zoom .01s }
@keyframes zoom { 0% {transform: scale(0)} 100% {transform: scale(1)} }

#box {
  will-change: transform;
  display: inline-block;
  background: #9cd;
  width: 100px;
  height: 100px;
  opacity: 0.5;
}

</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div class="margin">
  <span class="grow">
    <div id="box"></div>
  </span>
</div>
<script>
var test = async_test("Tests that when a LayoutObject loses its PaintLayer due to completion of an animation of an inline statically positioned element, we correctly update the locations of descendent layers");

var box = document.querySelector("#box");
box.parentNode.addEventListener("animationend", test.step_func_done(() => {
  assert_equals(document.elementFromPoint(150, 150), box);
}));

</script>
